import React from 'react';
import { Button, Form, Row, Col, DatePicker } from 'antd';
import Grid from '../../components/table/grid';
import { injectIntl } from 'react-intl';
import moment from 'moment';
import axios from 'axios';
import qs from 'qs';
import {sessionManager} from '../../utils/sessionStorage';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const createForm = Form.create;
class tPlusZero extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            refresh:0,
            params:{
                startTime:moment().format('YYYYMMDD'),
                endTime:moment().format('YYYYMMDD')
            }
        };
        this.common = this.props.intl.messages.common;
        this.format="YYYY/MM/DD"
        this.columns=[
            {
                title: '订单编号',
                dataIndex: 'id',
                key: 'id',
                width:200
            },
            {
                title: '电站名称',
                dataIndex: 'stubGroupName',
                key: 'stubGroupName',
                width:200
            },
            {
                title: '终端编号',
                dataIndex: 'stubGroupId',
                key: 'stubGroupId',
                width:200
            },
            {
                title: '启动时间',
                dataIndex: 'timeStart',
                key: 'timeStart',
                width:200
            },
            {
                title: '停止时间',
                dataIndex: 'timeEnd',
                key: 'timeEnd',
                width:200
            },
            {
                title: '电量（kW）',
                dataIndex: 'power',
                key: 'power',
                width:200
            },
            {
                title: '电费(元)',
                dataIndex: 'orginElecFee',
                key: 'orginElecFee',
                width:200
            },
            {
                title: '服务费',
                dataIndex: 'orginServiceFee',
                key: 'orginServiceFee',
                width:200
            },
            {
                title: '订单金额(元)',
                dataIndex: 'feeTotal',
                key: 'feeTotal',
                width:200
            },
        ]
    }

    disabledDate=(current)=> {
        // Can not select days before today and today
        return current && current >= moment().endOf('day');
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!!err) {
                
            }
            console.log(values)
            values.startTime=values.time[0].format('YYYYMMDD');
            values.endTime=values.time[1].format('YYYYMMDD');
            delete values.time;
            this.setState({
                params:Object.assign(this.state.params,values),
                refresh:this.state.refresh+1
            })
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const token=(JSON.parse(sessionStorage.getItem("token"))||{}).token;
        let locale=sessionManager.get('locale');
        let exportQs=`${qs.stringify(this.state.params)}&token=${token}&locale=${locale}`;
        return (
            <div>
                <Row gutter={8}>
                    <Col span={6}>
                        <FormItem>
                            {getFieldDecorator('time',{
                                initialValue:[moment(this.state.params.startTime,this.format),moment(this.state.params.endTime,this.format)]
                            }
								)(
									<RangePicker
                                    format={this.format}
                                    disabledDate={this.disabledDate}
                                    allowClear={false}
                                />
								)}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem>
                            <Button type={'primary'} style={{marginRight:8}} onClick={this.handleSubmit}>{'查询'}</Button>
                            <a href={`${axios.defaults.baseURL}/api/settlement/acquirerOrderDetail/export?${exportQs}`}>
                                <Button>{'导出报表'}</Button>
                            </a> 
                        </FormItem>
                    </Col>
                </Row>
                <Grid url={'/api/settlement/order/acquirerOrderDetail'} columns={this.columns} refresh={this.state.refresh} params={this.state.params}/>
            </div>
        );
    }
}

tPlusZero=createForm()(tPlusZero);
export default injectIntl(tPlusZero);